
<script setup lang="ts">
import { ref } from 'vue'

const imgUrl = ref(
  'https://ts3.cn.mm.bing.net/th?id=ORMS.27cdac6ba9cef51899b07407735ca171&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1&p=0'
)
const changeImg = () => {
  imgUrl.value =
    'https://ts2.cn.mm.bing.net/th?id=ORMS.1bf96f5bce379d27a8dedb047b095f42&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1.25&p=0'
}

const isBlue = ref(false)
const isOrange = ref(false)

const toggleClass = () => {
  isBlue.value = !isBlue.value
  isOrange.value = !isOrange.value
}
</script>

<!-- 结构 -->
<template>
  <!-- v-bind 基本用法v-bind:属性名 简写是:属性名 -->
  <!-- <img @click="changeImg" v-bind:src="imgUrl" alt="" /> -->
  <div><img @click="changeImg" :src="imgUrl" alt="" /></div>

  <!-- :class=“类名：是否生效的表达式” -->
  <div class="box" :class="{ skyblue: isBlue, orange: isOrange }" @click="toggleClass"></div>
</template>

<!-- 样式 -->
<style scoped>
img {
  width: 200px;
  height: 200px;
}
.box {
  width: 100px;
  height: 100px;
  border: 1px black solid;
}
.skyblue {
  background-color: skyblue;
}
.orange {
  border-color: orange;
  border-width: 10px;
}
</style>